<!--
 * @Author: jinjing
 * @Date: 2024-11-23
 * @Description: 主页面及菜单组件。
 -->
<script setup>
  import { onMounted, ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';

  const router = useRouter()
  const route = useRoute()
  const activeIndex = ref('')
  const menuList = ref([
    { label: '基金信息', index: 'fundInfo', path: '/fundInfo'},
    { label: '基金净值', index: 'fundNAV', path: '/fundNAV'},
    { label: '管理人托管人', index: 'managerCustodian', path: '/managerCustodian'},
    { label: '基金成立分析', index: 'establishAnalysis', path: '/establishAnalysis'},
    { label: '基金净值走势', index: 'navTrend', path: '/navTrend'},
    { label: '基金收益率标准差', index: 'standardDeviation', path: '/standardDeviation'},
  ])
  const handleSelect = (key, keyPath) => {
    console.log(key, keyPath)
    router.push({path: '/' + key})
  }
  
  watch(
      route,
      () => {
        menuList.value.forEach((item) => {
          if (route.path === item.path) {
            activeIndex.value = item.index;
          }
        });
      },
      { immediate: true }
    );
</script>

<template>
    <el-menu 
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect">
      <el-menu-item v-for="item in menuList" 
        :key="item.index" 
        :index="item.index"
        >{{ item.label }}
      </el-menu-item>
    </el-menu>
    <Suspense>
    <router-view/>
    </Suspense>
</template>

<style scoped>
  .tabs{
    display: inline;
  }
</style>
